компоненти - JavaScript довідка

компоненти Vue.js

Компонент це елемент не стандартний, якого немає у HTML але який створюється за допомогою опису: шаблону компонента - елементів в компоненті, подій, методів компонента - JavaScript код компонента, стилі компонента - CSS стилі компонента.

Компоненти у Vue.js це екземпляр об'єкта Vue з своєю назвою.

Vue.js

шаблон компонента який описується у template або у самому елементі до якого компілюється компонент
директиви фреймворка Vue
дані компонента як глобальні властивості описані у data
методи компонента описані у methods
вхідні параметри компонента вказані у props
computed - властивості data над якими слід слідкувати.
watch - спостереження над ключами властивості data.

Так як компоненти це перевиконані екземпляри Vue, то вони приймають опції з new Vue, такі як data, computed, watch, methods і т.д.

Приклад простого компоненту Vue.js який задається (компілюється) до вказаного елемента з id="app".

<div id="app">
	<div>
		<input v-model="text"> <label>{{text}}</label>
	</div>
</div>

new Vue({el:'#app', data:{text:'Привіт!'}});

Також можна задавати шаблон компонента за допомогою template

var app2=new Vue({el:'#app2', data:{text:'Привіт!'}, template:'<div><input v-model="text"> <label>{{text}}</label></div>'});

Vue.js дозволяє реєструвати компонент за допомогою Vue.component() для подальшого використання.

Vue.component('my-div',{template:'<div><input v-model="text"> <label>{{text}}</label></div>', data:function(){return {text:'Привіт!'};} });
new Vue({el:'#app3'});

Vue.js підтримує технологію однофайлові компоненти (Single File Component) яка дозволяє описувати компонент в одному файлі з розиренням .vue і імпортувати його за допомогою Webpack.

Приклад:

Компонент який дозволяє додавати в список країни в яких побував користувач. Список країн завантажуємо з сервера за допомогою fetch.

<div id="test1">
	<my-list-tyr-country v-bind:list_country="this.list_country"></my-list-tyr-country>
</div>

//реєструємо компонент
Vue.component('my-list-tyr-country',{
	template : `<div><span style="font-size:18pt;">В яких країнах Ви побували</span>
		<div>
			<select v-model="name">
				<option v-for="item in list_country" >{{item}}</option>
			</select> 
			<button v-on:click="add(name)">додати</button></div>
		<div>
			<span v-if="warn=='none'">Виберіть країну зі списку</span>
			<span style="color:red;" v-else-if="warn=='islist'">У списку вже є країна {{my_name}}</span>
			<span style="color:green;" v-else-if="warn=='add'">Країну {{my_name}} успішно додали у список.</span>
		</div>
		<div>
			<ul><li v-for="item in my_list">{{item}}</li></ul></div>
		</div>`,
	data:function(){
		return {
			my_list:[],
			name:'',
			my_name:'',
			warn:'none'
			};
	},
	props:{
		list_country:Array
	},
	methods:{
		add:function(a){
			if(a==''){this.warn='none'; return;}
			if(this.my_list.indexOf(a)==-1){
				this.my_list.push(a);
				this.warn='add';
				this.my_name=a;
			}else{
				this.warn='islist';
				this.my_name=a;
			}
		}
	}
});

//завантажуємо список країн
fetch('/dani/GEO_CODES.json').then(function(res){
	res.json().then(function(data){
		//створюємо масив з назвами країн
		let list_country=[];
		for(let key in data)list_country.push(data[key].name);
		//компілюємо компонент у елемент #test1
		new Vue({el:'#test1', data:{list_country:list_country} });

	}, function(err){console.log(err);});
}, function(er){alert(er);});

Аналог на "чистому" JavaScript

На "чистому" JavaScript це можна реалізувати за допомогою Web-компонентів: